<template>
  <section v-loading="loading" class="cms-body">

    <div class="cms-list-header flex-between">
      <el-button type="primary" icon="el-icon-plus" @click="routerLink('/adv/save','save',0)" v-perms="'/adv/save'">添加
      </el-button>
      <div class="cms-list-header clearfix flex" style="flex-wrap:wrap;">
        <el-select v-model="params.isEnabled" @change="goQuery()">
          <el-option label="启用状态" value=""></el-option>
          <el-option label="禁用" value="0"></el-option>
          <el-option label="启用" value="1"></el-option>
        </el-select>
        <el-select v-model="params.isExpire" @change="goQuery()">
          <el-option label="排期状态" value=""></el-option>
          <el-option label="未开始" value="0"></el-option>
          <el-option label="展示中" value="1"></el-option>
          <el-option label="已过期" value="2"></el-option>
        </el-select>
        <el-select v-model="params.advType" @change="goQuery()">
          <el-option label="投放设备" value=""></el-option>
          <el-option label="pc" value="0"></el-option>
          <el-option label="mobile" value="1"></el-option>
        </el-select>
        <el-select v-model="params.spaceType" @change="goQuery()" v-if="params.advType==0">
          <el-option label="广告位置" value=""></el-option>
          <el-option label="首页广告" value="1"></el-option>
          <el-option label="频道广告" value="2"></el-option>
          <el-option label="爆料广告" value="3"></el-option>
        </el-select>
        <el-select v-model="params.spaceType" @change="goQuery()" v-if="params.advType==1">
          <el-option label="广告类型" value=""></el-option>
          <el-option label="推荐广告" value="1"></el-option>
          <el-option label="副刊广告" value="2"></el-option>
          <el-option label="频道广告" value="3"></el-option>
          <el-option label="首页弹窗广告" value="4"></el-option>
        </el-select>
        <el-select @change="selectChange" v-model="params.targetName" clearable placeholder="请选择">
          <el-option v-for="item in specialChannelList" :key="item.channelId" :label="item.channelName"
                     :value="item.channelId">
          </el-option>
          <el-option v-for="item in channelList" :key="item.channelId" :label="item.channelName"
                     :value="item.channelId">
          </el-option>
        </el-select>
        <el-date-picker v-model="params.startTime" type="datetime" placeholder="排期开始时间" style="height: 32px;" class="cms-width"
                        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-date-picker v-model="params.endTime" type="datetime" placeholder="排期结束时间" style="height: 32px;" class="cms-width"
                        value-format=" yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <cms-input label="广告名称" v-model="params.advName"></cms-input>
        <div style="margin-top:16px;flex:auto" class="content-flex-right">
          <el-button @click="goQuery()">查询</el-button>
          <el-button @click="exportExcel2()">导出</el-button>
        </div>

      </div>
    </div>

    <!-- 数据表格显示区域 -->
    <el-table :data="tableData" id="table" stripe style="width: 100%" @selection-change="checkIds">

      <el-table-column prop="id" label="ID" align="center"></el-table-column>

      <el-table-column prop="advName" label="广告名称" align="left"></el-table-column>

      <el-table-column prop="advType" width="60" label="投放设备" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.advType==0">pc</span>
          <span v-if="scope.row.advType==1">mobile</span>
        </template>
      </el-table-column>

      <el-table-column prop="position" width="60" label="位置数字" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.advType==1">
            <span>{{scope.row.position}}</span>
          </div>
          <div v-if="scope.row.advType==0">
            <span v-if="scope.row.position==1">顶部右侧</span>
            <span v-if="scope.row.position==2">中间广告1</span>
            <span v-if="scope.row.position==3">中间广告2</span>
            <span v-if="scope.row.position==4">底部广告</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="targetName" label="目标" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.targetName!=''">
            <span>{{scope.row.targetName}}</span>
          </div>
          <div v-else>
            <div v-if="scope.row.advType==0">
              <span v-if="scope.row.spaceType==1">首页广告</span>
              <span v-if="scope.row.spaceType==2">频道广告</span>
              <span v-if="scope.row.spaceType==3">爆料广告</span>
            </div>
            <div v-if="scope.row.advType==1">
              <span v-if="scope.row.spaceType==1">推荐广告</span>
              <span v-if="scope.row.spaceType==2">副刊广告</span>
              <span v-if="scope.row.spaceType==3">频道广告</span>
              <span v-if="scope.row.spaceType==4">首页弹窗广告</span>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="problemTopicImg" label="封面图" align="center">
        <template slot-scope="scope">
          <img-preivew :src="scope.row.image_url | imgPathFilter" :min-Width="50"></img-preivew>
        </template>
      </el-table-column>

      <el-table-column prop="enabled" label="启用" width="50" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.isEnabled==1">是</span>
          <span v-if="scope.row.isEnabled==0">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="showNum" label="浏览次数" align="center"></el-table-column>
      <el-table-column prop="clickNum" label="点击次数" align="center"></el-table-column>
      <el-table-column prop="startTime" width="120" label="排期时间" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.startTime}}<br>{{scope.row.endTime}}</span>
        </template>
      </el-table-column>
      <el-table-column width="80" label="操作" align="center">
        <div slot-scope="scope">
          <cms-button type="edit" @click.native="routerLink('/adv/update','update',scope.row.id)"
                      v-perms="'/adv/update'"></cms-button>
          <cms-button type="delete" @click.native="deleteBatch($api.advDelete,scope.row.id)"
                      v-perms="'/adv/delete'"></cms-button>
        </div>
      </el-table-column>

    </el-table>

    <!-- 表格底部 -->
    <div class="cms-list-footer">
      <div class="cms-left"></div>
      <!-- cms分页组件 -->
      <cms-pagination :total="total" @change="getPages"></cms-pagination>
    </div>

  </section>
</template>
<script>
  import listMixins from '@/mixins/list'
  import axios from "axios/index";
  import FileSaver from "file-saver";
  import XLSX from "xlsx";

  export default {
    mixins: [listMixins],
    data() {
      return {
        params: {//只需要业务参数
          pageNo: 1,
          pageSize: 10,
          isEnabled: '',
          advType: '',
          spaceType: '',
          targetId: '',
          targetName: '',
          advName: '',
          startTime: '',
          endTime: '',
          isExpire: ''
        },
        specialChannelList: [],
        channelList: []
      }
    },
    methods: {
      selectChange(val) {
        this.params.targetId = val;
        this.goQuery();
      },
      initDataInfo() {
        axios.all([
          axios.post(this.$api.getSpecialChannelList, {}),
          axios.post(this.$api.getAdvOneLevelList, {}),
        ]).then(
          axios.spread((specialChannelRes, channelRes) => {
            this.channelList = channelRes.body;
            this.specialChannelList = specialChannelRes.body;
          })
        )
      },
      //导出数据
      exportExcel() {
        this.pageSize = 1000
        let wb = XLSX.utils.table_to_book(document.querySelector('#table'));   // 这里就是表格
        let wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: true, type: 'array'});
        try {
          FileSaver.saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '广告排期.xlsx');  //table是自己导出文件时的命名，随意
        } catch (e) {
          if (typeof console !== 'undefined')
            console.log(e, wbout)
        }
        this.pageSize = 10
        return wbout
      },
      exportExcel2() {
        this.loading = true;
        this.warningMessage('数据正在处理中');
        axios.post(this.$api.advList, this.params).then(res => {
          if (res.code == "200") {
            this.loading = false;
            this.getExcel(res.body)
          }
        }).catch(error => {
          this.loading = false;
        });
      },
      getExcel: function (res) {
        require.ensure([], () => {
          const {export_json_to_excel} = require('../../../vendor/Export2Excel.js')
          const tHeader = ['广告Id', '广告名称', '投放设备', '投放位置', '投放目标', '浏览次数', '点击次数', '排期开始时间', '排期结束时间']
          const filterVal = ['id', 'advName', 'advType', 'position', 'targetName', 'showNum', 'clickNum', 'startTime', 'endTime']
          for (let i in res) {
            let adv = res[i];
            let advType = adv.advType;
            let spaceType = adv.spaceType;
            let targetName = adv.targetName;
            if (this.$myUtils.isNull(targetName)) {
              if (advType == 0) {
                if (spaceType == 1) {
                  adv.targetName = '首页广告';
                }
                if (spaceType == 2) {
                  adv.targetName = '频道广告';
                }
                if (spaceType == 3) {
                  adv.targetName = '爆料广告';
                }
              }
              if (advType == 1) {
                if (spaceType == 1) {
                  adv.targetName = '推荐广告';
                }
                if (spaceType == 2) {
                  adv.targetName = '副刊广告';
                }
                if (spaceType == 3) {
                  adv.targetName = '频道广告';
                }
                if (spaceType == 3) {
                  adv.targetName = '首页弹窗广告';
                }
              }
            }
            if (advType == 0) {
              adv.advType = 'pc'
              let position = adv.position;
              if (position == 1) {
                adv.position = '顶部右侧';
              }
              if (position == 2) {
                adv.position = '中间广告1';
              }
              if (position == 3) {
                adv.position = '中间广告2';
              }
              if (position == 4) {
                adv.position = '底部广告';
              }
            }
            if (advType == 1) {
              adv.advType = 'mobile'
            }
          }
          const list = res
          const data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '广告排期表')
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
    },
    created() {
      this.initDataInfo();
      this.initTableData(this.$api.advPageList, this.params);
    }
  };
</script>
